<template>
  <div>
  <baidu-map id="baidumap" class="map" ak="Zzu0e7ZXMQBTfleThIuAfwC8mc8SGjvi"
             :center="map.center"
             :zoom="map.zoom"
             :scroll-wheel-zoom="map.scroll">
    <bm-marker :position="{lng: item.lng, lat:  item.lat}"
               :dragging="true" @click="infoWindowOpen(item)"
               v-for="(item,index) in items" :key="index"
    />
    <el-dialog :visible.sync="show">
      <el-form v-model="formData">
        <el-form-item label="收货人：">{{formData.accepter}}</el-form-item>
        <el-form-item label="收货地址：">{{formData.address}}</el-form-item>
        <el-form-item label="备注：">{{formData.remark}}</el-form-item>
        <el-form-item label="货品">
          <el-image :src="formData.image"></el-image>
        </el-form-item>
      </el-form>
    </el-dialog>
  </baidu-map>

  </div>

</template>
<script>
  import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
  import BmMarker from 'vue-baidu-map/components/overlays/Marker.vue'
  export default {
    name: "map",
    components: {
      BaiduMap,
      BmMarker
    },
    data() {
      return {
        map: {
          center: {lng: 121.580964, lat: 29.821473},//地图的中心点坐标
          zoom: 15,//1-18，数值越大离地面越近，地图实际面积越小
          scroll: true //支持滚动鼠标缩放
        },
        show: false,
        formData: {
          image: require("assets/good/product-0.jpg"),
          accepter: 'byy',
          remark: '无',
          address: '宁波理工菜鸟驿站'
        },
        items:[
          {
            lng: 121.574448,
            lat:  29.814977,
            image: require("assets/good/product-0.jpg"),
            accepter: 'byy',
            remark: '无',
            address: '宁波理工菜鸟驿站'
          },
          {
            lng: 121.562571,
            lat:  29.816446,
            image: require("assets/good/product-1.jpg"),
            accepter: '姜泥',
            remark: '无',
            address: '浙江万里学院'
          },
          {
            lng: 121.680964,
            lat:  29.821473,
            image: require("assets/good/product-2.jpg"),
            accepter: 'ztz',
            remark: '无',
            address: '东钱湖'
          },
          {

            lng:  121.873301,
            lat:  29.455391,
            image: require("assets/good/product-3.jpg"),
            accepter: 'jl',
            remark: '要新鲜的',
            address: '万达广场'
          },
          {

            lng: 121.566439,
            lat:  29.833045,
            image: require("assets/good/product-4.jpg"),
            accepter: '周大海',
            remark: '无',
            address: '印象城'
          },
          {
            lng: 121.719977,
            lat:  29.955436,
            image: require("assets/good/product-5.jpg"),
            accepter: '徐凤年',
            remark: '无',
            address: '镇海中学'
          }
        ]
      }
    },
    methods: {
      infoWindowClose () {
        this.show = false
      },
      infoWindowOpen (item) {
        this.show = true
        this.formData = item
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .map
    width auto
    height 800px //宽高一定要设置
    margin 0 20px 20px 20px
</style>
